<!-- 提现明细页 -->
<template>
  <view v-if="shenheStatus == 0" class="page-summary">
    <view class="top-tabs">
      <view
        class="tab-item"
        :class="currentTab == index ? 'active' : ''"
        v-for="(item, index) in tabList"
        :key="index"
        @click="tabsChange(index, item)"
      >
        <view class="tab-text">{{ item.name }}</view>
        <view class="tab-active"></view>
      </view>
    </view>
    <view class="list-section" v-if="listData.length > 0">
      <view class="list-item" v-for="(item, index) in listData" :key="index">
        <view class="item-summary">
          <view class="status">{{ item.status | transStatus }}</view>
          <view class="time">{{ item.created_at }}</view>
        </view>
        <view class="item-price">+{{ item.price }} </view>
      </view>
    </view>
    <u-empty mode="data" v-else> </u-empty>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
export default {
  components: { Shenhe },
  data() {
    return {
      tabList: [
        {
          status: -1,
          name: '全部',
        },
        {
          status: 0,
          name: '申请中',
        },
        {
          status: 2,
          name: '已打款',
        },
      ],
      listData: [],
      currentTab: 0,
      page: 1,
      pageSize: 20,
      row_count: 0,
      status: -1,
    };
  },
  onLoad(t) {
    this.getListData({
      page: this.page,
      status: this.status,
    });
  },
  computed: {},
  onShow() {},
  watch: {},
  filters: {
    transStatus(val) {
      let obj = {
        0: '申请中',
        2: '已打款',
        1: '已审核',
        3: '已拒绝',
      };
      return obj[val];
    },
  },
  onReachBottom() {
    if (this.page * this.pageSize >= this.row_count) return;
    this.page++;
    this.getListData({
      page: this.page,
      status: this.status,
      loadMore: true,
    });
  },
  methods: {
    getListData(params) {
      uni.showLoading({
        title: this.$t('home.loading'),
      });
      this.$allrequest.mdAdmin.withdrawList(params).then(res => {
        uni.hideLoading();
        if (!res.code) {
          if (params.loadMore) {
            this.listData = [...this.listData, ...res.data.list];
          } else {
            this.listData = res.data.list;
          }
          this.row_count = res.data.row_count;
        }
      });
    },
    tabsChange(index, item) {
      this.currentTab = index;
      this.status = item.status;
      this.page = 1;
      this.getListData({
        page: this.page,
        status: this.status,
        keyword: this.keyword,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page-summary {
  width: 100%;
  min-height: 100vh;
  background: #f2f2f2;
  padding-top: 114rpx;
  .top-tabs {
    width: 100%;
    height: 90rpx;
    background: #ffffff;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 111;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .tab-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .tab-text {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #262626;
      }
      .tab-active {
        width: 50rpx;
        height: 6rpx;
        background: #f0250e;
        margin-top: 4rpx;
        opacity: 0;
      }
    }
    .active {
      .tab-text {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #262626;
      }
      .tab-active {
        opacity: 1;
      }
    }
  }
  .list-section {
    width: 100%;
    padding-left: 30rpx;
    background-color: #ffffff;
    .list-item {
      width: 100%;
      border-bottom: 1px solid#F1F1F1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 26rpx 30rpx 26rpx 0;
      .item-price {
        font-size: 36rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #262626;
      }
      .item-summary {
        text-align: left;
        .status {
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #262626;
        }
        .time {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #8c8c8c;
          margin-top: 4rpx;
        }
      }
    }
    .list-item:last-child {
      border-bottom: 0 none;
    }
  }
}
</style>
